<template>
  <div>
    <van-nav-bar title="本店产品"></van-nav-bar>
    <van-search v-model="value" placeholder="请输入商品名称" 
    @search="onSearch"/>
    <van-tabs v-model="active" @click="onClick">
      <van-tab title="全部" name="a">
        <van-grid :column-num="2" v-if="value==''">
            <van-grid-item v-for="item in alllist" :key="item.goodsId" 
            @click="onItemClick(item.goodsId)" :text="item.goodsName">
              <img slot="icon" :src="item">
              <template #icon>
                <img :src="item.img">
                <van-icon name="cart-o" badge="9" class="shopicon" />
                <div class="price" style="color:red">￥{{ item.price }}</div>
              </template>
            </van-grid-item>
        </van-grid>
        <van-grid :column-num="2" v-else>
            <van-grid-item v-for="item in searchList" :key="item.goodsId" 
            @click="onItemClick(item.goodsId)" :text="item.goodsName">
              <img slot="icon" :src="item">
              <template #icon>
                <img :src="item.img">
                <van-icon name="cart-o" badge="9" class="shopicon" />
                <div class="price" style="color:red">￥{{ item.price }}</div>
              </template>
            </van-grid-item>
        </van-grid>
       
        

      </van-tab>
      <van-tab title="护发产品" name="b" >
        <van-grid :column-num="2">

          <van-grid-item v-for="item in carelist" 
          :key="item.goodsId" icon="photo-o" :text="item.goodsName"
            @click="onItemClick(item.goodsId)">
            <img slot="icon" :src="item.img" alt="">

            <template #icon>
              <img :src="item.img">
              <van-icon name="cart-o" badge="9" class="shopicon" />

              <div class="price" style="color:red">￥{{ item.price }}</div>
            </template>
            <!-- 购物车小图标 -->


          </van-grid-item>
        </van-grid>

      </van-tab>
      <van-tab title="美发工具" name="c" >

        <van-grid :column-num="2">

          <van-grid-item v-for="item in toolList" :key="item.goodsId" icon="photo-o" :text="item.goodsName"
            @click="onItemClick(item.goodsId)">
            <img slot="icon" :src="item.img" alt="">

            <template #icon>
              <img :src="item.img">
              <van-icon name="cart-o" badge="9" class="shopicon" />

              <div class="price" style="color:red">{{ item.price }}</div>
            </template>
          </van-grid-item>
        </van-grid>

      </van-tab>
    </van-tabs>

    
    <Bottom></Bottom>
  </div>
</template>

<script>
import Vue from 'vue';
import { Grid, GridItem } from 'vant';
import { Search } from 'vant';
import axios from "axios";
import { Toast } from 'vant';
Vue.use(Search);
Vue.use(Grid);
Vue.use(GridItem);
import Bottom from "@/components/bottom.vue"
export default {
  
  components: {
    Bottom
  },
  data() {
    return {
      searchList:[],
      price: '',
      alllist: [],
      active: "全部",
      carelist:[ ],
      toolList:[],
      // vant带的
      value: '',

    }
  },
  methods: {
       async onSearch(){
        console.log(this.value);
        let res = await axios({
          url:`http://192.168.20.106:8000/api/pro/goodslist1/?str=`+this.value,
          method: 'get'
        })
        console.log(res, '搜索');
        this.searchList = res.data.data
     },

    onItemClick(id) {
      // 路由跳转
      this.$router.push({path:'/detailsNew',query: {id:id}})
    },
     async getlist(){
      let res = await axios({
        url:'http://192.168.20.106:8000/api/pro/goodslist',
        method:'get'
      })
    //  console.log(res,'1');
       this.alllist = res.data.data
      
    },
     async get(){
      
      let res = await axios({
        url:'http://192.168.20.106:8000/api/pro/goodsmeifa',
        method:'get'
      })
      console.log(res);
       this.carelist = res.data.data
      
    
    },
    async goodslfgj(){
      
      let res = await axios({
        url:'http://192.168.20.106:8000/api/pro/goodslfgj',
        method:'get'
      })
      console.log(res);
       this.toolList = res.data.data
      
    
    },
    onClick(name, title) {
      console.log(name, title);
      
    },
    

  },
  mounted() {
   
    this.getlist()
    this.get()
    this.goodslfgj()
  }
}
</script>

<style scoped>
.textname {
  position: absolute;
  bottom: 0;
  right: 0;
}

.shopicon {
  position: absolute;
  bottom: -28px;
  right: 12px;
}

.van-grid-item__text {
  margin-top: 40px;
  position: absolute;
  bottom: -21px;
  right: 8px;
}

.price {
  position: absolute;
  top: 118px;
  right: 68px;
}

img {
  width: 150px;
  height: 100px;
}
</style>